﻿@page "/tests/pickers"
<Row>
    <Column ColumnSize="ColumnSize.Is6">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Date Picker</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true">
                    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Date</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                        <DatePicker TValue="DateTime?" Placeholder="Select date..." />
                    </FieldBody>
                </Field>
                <Field Horizontal="true">
                    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Date & Time</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                        <DatePicker TValue="DateTime?" Placeholder="Select date and time..." InputMode="DateInputMode.DateTime" />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Time Picker</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true">
                    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Time</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                        <TimePicker TValue="TimeSpan?" Placeholder="Select time..." />
                    </FieldBody>
                </Field>
                <Field Horizontal="true">
                    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">24h Format</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                        <TimePicker TValue="TimeSpan?" Placeholder="Select time in 24h format..." TimeAs24hr />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6">
        <Card Margin="Margin.Is4.FromTop">
            <CardHeader>
                <CardTitle>Color Picker</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true">
                    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Color</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                        <ColorPicker />
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>